<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>





<legend>Add New Room Type</legend>

<form name="" id="add-room-type" action="/adminpages/AddRoomTypeServlet" method="post" enctype="multipart/form-data">

    <div class="span4">

        <p>
            <label for="room-type" >Room Type Name</label>
            <input type="text" name="room-type" id="room-type" required class="input-xlarge" placeholder="Enter the name of Type of Room">
        </p>


        <p>
            <label>Select Facilitites for Room ( use ctrl key to multi select )</label>
            <select multiple="multiple" name="facilities">
                <c:forEach var="f" items="${facility}">  
                    <option value="${f.facilityId}">${f.facilityName}</option>
                </c:forEach>                                       
            </select>
        </p>



    </div>

    <div class="span4">

        <p class="input-prepend input-append">
            <label for="capacity" >Ideal Capacity</label>
            <input type="number" id="capacity" name="capacity" required class="input-medium" placeholder="Capacity"><span class="add-on">Persons</span>
        </p>

        <br>

        <p>
            <label>Select the Gallery for Room</label>
            <select name="gallery">
                <c:forEach var="g" items="${gallery}">
                    <option value="${g.galleryId}">${g.galleryName}</option>
                </c:forEach>	

            </select>
        </p>



    </div> 

    <div class="span3">

        <p>
            <label for="file-upload" >Select the thumbnail pic for Room</label>
            <input type="file" id="file-upload" name="file-upload" required class="input-xlarge">
        </p>

        <br>

        <p class="input-append">
            <label for="no-of-rooms" >Number of Rooms to Add</label>
            <input class="span2 width-100" id="no-of-rooms" type="number" name="number">
            <button onClick="add_input()" class="btn" type="button">Add</button>
        </p>
        <br>


    </div>

    <div class="clearfix"></div>

    <div class="span11">

        <div id="dynamic_inputs" class="dynamic">
            <!-- Dynamic textboxes for room numbers will be generated here-->
            <br>
        </div>

        <p class="textarea-nice">
            <label for="description" >Description</label>
            <textarea name="description" class="input-block-level" required id="description" placeholder="Enter the description/details of the Room" rows="6" cols="4"></textarea>
        </p>

        <br>

        <p>
            <label class="checkbox">
                <input type="checkbox" name="checkbox" value="active"> Check the box to display room at front end.
            </label>

        </p>
        <br>

        <p>
            <input type="submit" class="btn btn-primary btn-large" value="Save" name="submit">
            <span class="text-success"> Display the "succesfully saved" message here on successfull submission</span>
        </p>


    </div>

    <div class="clearfix"></div>

</form>  







<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.1.min.js"><\/script>')</script>

<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/main.js"></script>
<script src="js/nicEdit.js"></script><!-- including nicedit js-->
<script src="js/jquery.validate.min.js"></script>
<script type="text/javascript">
		
		
		
		
		
    function add_input(){ // dynamic textbox generation script
		
	
        var counter = document.getElementById('no-of-rooms').value;
        var div_id = document.getElementById('dynamic_inputs');
		
        if(counter>0)
            div_id.innerHTML = "<label>Enter the Room numbers</label>";
		
		
        for (var i=0;i<counter;i++)
        {
			
            var link = document.createElement('input');
            link.setAttribute('type', 'text');
            link.setAttribute('class', 'input-mini');
            link.setAttribute('name', 'text'+i);
            link.setAttribute('required', 'required');
            div_id.appendChild(link);	
        }

    }

		
    //form validation
    $().ready(function() {
        // validate signup form on keyup and submit
        var temp = /[1-5]/;
        $("#add-room-type").validate(
			
        {
            rules: {
                'room-type':{
                    required: true,
                    minlength: 2
                },
                'capacity': {
                    required: true,
                    min : 2,
                    max : 5
							

                },
                'file-uplaod':"required"
            },
            messages: {
                'room-type': "Pls enter room type name, minimum 2 characters",
                capacity: "Pls enter the capacity of room, from 2 to 5",
                'file-uplaod': "Pls select the image for the room"
            }
        }
    );
    });
		
    bkLib.onDomLoaded(function() { //assigning nicedit to textarea 
        new nicEditor({fullPanel : true,iconsPath : 'js/nicEditorIcons.gif',xhtml: true}).panelInstance('description');
    });

		
			
			
</script>
</body>
</html>
